<template>
  <el-row style="min-width: 1500px">
    <el-col :span="24">
      <div class="wrap_notifier_content">
        <div class="wrap_notifier_content--head">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="">所有公告</el-menu-item>
            <el-menu-item index="2">产品公告</el-menu-item>
            <el-menu-item index="3">活动公告</el-menu-item>
            <el-menu-item index="4">其他公告</el-menu-item>
          </el-menu>
        </div>
        <div class="wrap_notifier_content--table_content">
          <div class="filterCondition x-flex">
            <div class="x-flex" style="width: 30%">
              <el-date-picker
                v-model="storageDate"
                style="width: 350px"
                placeholder="请选择日期"
                type="date"
                size="large"
                @change="Dateclick"
              />
              <el-input
                v-model="searchInput"
                clearable
                :suffix-icon="Search"
                class="x-m-l-15"
                placeholder="请输入公告名"
                size="large"
                @input="inputClick"
              />
            </div>
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              :show-header="false"
              border
              height="670"
              style="width: 100%"
              @row-click="onNotifies"
            >
              <template #empty>
                <div class="no-data">
                  <el-empty
                    :image="require('../../assets/nothave.png')"
                    style="margin-top: 30%"
                  >
                  </el-empty>
                </div>
              </template>
              <el-table-column prop="noticeContent" width="1000" />
              <el-table-column show-overflow-tooltip>
                <template #default="{ row }">
                  <div v-if="row.noticeType == 2">产品公告</div>
                  <div v-if="row.noticeType == 3">活动公告</div>
                  <div v-if="row.noticeType == 4">其他公告</div>
                </template>
              </el-table-column>
              <el-table-column prop="lastUpdateDate" width="230" />
            </el-table>
          </div>
        </div>
        <div style="margin: 3% 37%">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalPagess"
            @size-change="sizepage"
            @current-change="currPage"
          />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { shallowRef, onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { GresourcesPage } from "../../api/advertising/index";
const activeIndex = shallowRef("");
const storageDate = shallowRef(""); //日历
const searchInput = ref(""); //搜索框
import { useRouter } from "vue-router";
const router = useRouter();

const tableData = ref([]);
var endDates = ref("");
var startDates = ref("");
var noticeTitles = ref("");
var noticeTypes = ref("");
const handleSelect = (key: string, keyPath: string[]) => {
  noticeTypes.value = keyPath;
  GresourcesPages();
};
const onNotifies = (ids: any) => {
  router.push({ path: "/index/notifistContent", query: { queryId: ids.id } });
  localStorage.setItem("HomeId", ids.id);
};

// 时间
const Dateclick = (val: any) => {
  if (val) {
    const dateString = val;
    // 将日期字符串转换为日期对象
    const date = new Date(dateString);
    // 获取年、月、日
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    // 格式化为 YYYY-MM-DD
    const formattedDate = `${year}-${month}-${day}`;
    endDates.value = formattedDate + " 23:59:59";
    startDates.value = formattedDate + " 00:00:00";
    GresourcesPages();
  } else {
    endDates.value = "";
    startDates.value = "";
    GresourcesPages();
  }
};
// 搜索
const inputClick = (val: any) => {
  noticeTitles.value = val;
  GresourcesPages();
};
const sizepage = (val: any) => {};
const pageNums = ref("1");
// 点击箭头左右
const currPage = (val: any) => {
  pageNums.value = val;
  GresourcesPages();
};
var totalPagess = ref("");
const GresourcesPages = async () => {
  let data = {
    endDate: endDates.value,
    startDate: startDates.value,
    noticeTitle: noticeTitles.value,
    noticeType: noticeTypes.value,
    pageNum: pageNums.value,
  };
  let res = await GresourcesPage(data);
  tableData.value = res.data.data.content;
  totalPagess.value = res.data.data.totalElements;
};
onMounted(() => {
  GresourcesPages();
});
</script>

<style lang="scss" scoped>
.wrap_notifier_content {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  box-sizing: border-box;
  overflow-y: auto;

  &--table_content {
    width: 100%;

    .filterCondition {
      margin: 15px 0;
      justify-content: flex-end;
    }
  }
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
</style>
